<template>
  <div class="page-selectdata">
    <Input
      style="width: 222px"
      v-model.trim="searchValue"
      :search="true"
      placeholder="请输入关键字"
      @on-search="searchKey"
    />
    <Row style="margin-top: 10px;">
      <Col span="8">
      <div class="merge-table-title"></div>
      <!-- 未选表格 -->
      <Table
        class="merge-table"
        ref="unselectedData"
        :columns="unSelectedColumns"
        :data="unselectedData"
        @on-selection-change="unselectedChange"
      />
      </Col>

      <Col span="16" style="padding-left: 20px;">
      <!-- 已选表格 -->
      <Table class="merge-table" :columns="selectedColumns" :data="selectedData">
        <template slot-scope="{ index }" slot="delete">
          <i class="iconfont icon-rubbish" @click="deleteSelect(index)"></i>
        </template>
        <template slot-scope="{ row }" slot="name">{{ row.name }}</template>
        <template slot-scope="{ row }" slot="fieldType">{{ row.fieldType }}</template>
      </Table>
      </Col>
    </Row>

    <div class="select-footer">
      <Button @click="cancelHandler" style="margin-right: 8px;">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </div>
</template>

<script>
// import { getDataSetData } from 'http/api/datas';
export default {
  props: ['id', 'fields'],
  data () {
    return {
      searchValue: '',
      unSelectedColumns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '字段名',
          key: 'name',
          ellipsis: true,
          tooltip: true
        }
      ],
      unselectedData: [],
      selectedColumns: [
        {
          title: '操作',
          slot: 'delete',
          width: 60
        },
        {
          title: '字段名',
          slot: 'name'
        },
        {
          title: '类型',
          slot: 'fieldType'
        }
      ],
      selectedData: [],

      // 未筛选的
      initialUnSelectedData: [],
      initialSelectedData: []
    };
  },
  methods: {
    // 获取字段列表信息
    getList () {
      // getDataSetData({
      //   id: this.id,
      //   field: '',
      //   fieldValue: '',
      //   pageIndex: 1,
      //   pageSize: 10
      // }).then(res => {
      //   // 仅仅获取字段
      //   if (res) {
      //     this.selectedData = this.fields ? [...this.fields] : [];

      //     let selectFieldsName = [];
      //     this.fields.forEach(item => {
      //       selectFieldsName.push(item.name);
      //     });

      //     // 过滤到已经选择的设置_checked为true
      //     res.headers.forEach(item => {
      //       if (selectFieldsName.includes(item.name)) {
      //         item._checked = true;
      //         this.selectedData.find(data => {
      //           if (data.name === item.name) {
      //             data.fieldType = item.fieldType;
      //             return true;
      //           }
      //         });
      //       } else {
      //         item._checked = false;
      //       }
      //     });

      //     this.unselectedData = res.headers;

      //     this.setInitialData();
      //   }
      // });
    },

    // 初始化的值缓存
    setInitialData () {
      if (this.searchValue === '') {
        this.initialSelectedData = this.selectedData;
        this.initialUnSelectedData = this.unselectedData;
      }
    },

    // 选择没选择的
    unselectedChange (arr) {
      let selectedArr = [];

      arr.forEach(item => {
        selectedArr.push(item.name)
      });

      this.unselectedData.forEach((item, index) => {
        if (selectedArr.includes(item.name)) {
          item._checked = true
        } else {
          item._checked = false
        }
      })

      this.selectedData = arr.map(item => {
        return {
          name: item.name,
          fieldType: item.fieldType
        };
      });

      this.setInitialData();
    },

    // 删除已经选择的
    deleteSelect (index) {
      // 当前选择
      let data = this.selectedData[index];
      let currentName = data.name;

      // 记录已经选择
      let getSelection = this.$refs.unselectedData.getSelection();

      // 过滤掉除了当前选择后的
      let selections = [];
      getSelection.forEach(item => {
        if (item.name !== currentName) {
          selections.push(item.name);
        }
      });

      if (selections.length === 0) {
        this.$refs.unselectedData.selectAll(false);
      } else {
        this.unselectedData.find(item => {
          let name = item.name;
          if (name === currentName) {
            item._checked = false;
          }

          if (selections.includes(name)) {
            item._checked = true;
          }
        });
      }

      this.selectedData.splice(index, 1);

      this.setInitialData();
    },

    // 获取新的列表
    getSearchData (datas) {
      let list = [];
      for (let i = 0; i < datas.length; i++) {
        const element = datas[i];
        if (
          element.name.toLowerCase().includes(this.searchValue.toLowerCase())
        ) {
          list.push(element);
        }
      }

      return list;
    },

    // 搜索
    searchKey () {
      if (this.searchValue === '') {
        this.unselectedData = this.initialUnSelectedData;
        let selectedData = [];
        this.initialUnSelectedData.forEach(item => {
          if (item._checked) {
            selectedData.push({
              name: item.name,
              fieldType: item.fieldType
            })
          }
        })
        this.selectedData = selectedData;
      } else {
        this.selectedData = this.getSearchData(this.selectedData);
        this.unselectedData = this.getSearchData(this.unselectedData);
      }
    },

    // 确定
    okHandler () {
      this.$emit('okHandler', this.selectedData);
    },

    // 取消
    cancelHandler () {
      this.$emit('cancelHandler');
    }
  },
  mounted () {
    this.getList();
  }
};
</script>

<style rel="stylesheet/less" lang="less">
.page-selectdata {
  .select-footer {
    text-align: right;
    margin-top: 10px;
  }
  .icon-rubbish {
    cursor: pointer;
  }
  .merge-table {
    .ivu-table td {
      height: 30px;
    }
    .ivu-table-body {
      max-height: 300px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}
</style>
